<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html >
<head>
	<meta charset="UTF-8">
	<title>凯胜项目管理系统</title>
	<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
	<link rel="stylesheet" href="static/css/daohang.css" type="text/css" />
	<link rel="stylesheet" href="static/css/style.css" type="text/css" />
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
	<style type="text/css">
		body{
			background-image:url("static/img/bg_main.jpg");
		}
		
		/* .bar{
			width:0;
			transition: width 3s linear 3s;
			/* Firefox 4 */
			-moz-transition:width 3s linear 3s;
			/* Safari and Chrome */
			-webkit-transition:width 3s linear 3s;
			/* Opera */
			-o-transition:width 3s linear 3s;
			}
		 */
		
	</style>
</head>
<body class="body">
	<%@ include file="include/top2.jsp" %>
	<jsp:include page="include/top.jsp">
		<jsp:param value="goal" name="tag"/>
	</jsp:include>
	<div class="container">
		<div class="row">
			<%-- <jsp:include page="include/side.jsp">
				<jsp:param value="new" name="tag"/>
			</jsp:include> --%>
			<br />
			<div class="span9">
				
				<div class="btn-group" style="float:right">
					<a class="btn" href="#"><i class="icon-cog"></i>操作</a>
					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="goal.jspx?m=toadd"><i class="icon-plus"></i>添加新目标</a></li>
						<li><a href="goal.jspx?m=alltask"><i class="icon-zoom-in"></i>浏览所有任务</a></li>
					</ul>
				</div>
				<br/><br/>
				<c:forEach items="${goalList}" var="d">
					<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
						<li class="active">
							<a href="task.jspx?id=${d.id}"><i class="icon-th"></i>${d.goalName}</a>
						</li>
						<li style="float:right"><i class="icon-edit"></i><a href="goal.jspx?m=toedit&id=${d.id}" class="link-black">编辑</a></li>
					</ul>
					<br>
					<div class="wall">
						<p style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${d.goalContent}</p><br>
						<div class="progress progress-danger">
						<c:if test="&{d.state}==0">
							还没有开始进行！
						</c:if>
							<div class="bar" style="width:0%;">${d.state}%</div>
						<script type="text/javascript">
							$(document).ready(function(){
								$(".bar").animate({width:"${d.state}%"},"slow");
							});
						</script>
						</div>
					</div>
				</c:forEach>
					
				<div class="clear"></div>
				<br /><br />
			</div>
		</div>
	</div>
	
	
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/jqueryui.js"></script>
	<script type="text/javascript" src="static/js/jquery.illuminate.0.7.min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
				
			$('#button').illuminate({
				'intensity': '0.5',
				'color': '#2c2c2c'
			});
			
			
		});
			
	</script>
</body>
</html>